<template>
  <v-card>
    <v-alert type="info" class="mb-10">
      <div slot="message">
        <div>
          调用
          <span class="blue-text"> showOptionColumnModal </span>
          方法，options: <span class="red-text"> tableName </span> 必须传
        </div>
      </div>
    </v-alert>
    <div class="mb-10">
      <v-button @click="handleClick">选项</v-button>
      <v-button @click="$refs.xTable.showFilterModal()">过滤</v-button>
      <v-button @click="$refs.xTable.getTableListData(true)">查询</v-button>
    </div>
    <vcu-table
      border
      resizable
      column-key
      customModalShow
      filterModalShow
      :filter-config="{ remote: true }"
      ref="xTable"
      :filterFormData="filterFormData"
      :loadOptions="options"
      :scroll-x="{ enabled: false }"
      class="sortable-column-demo"
    ></vcu-table>

    <vcu-chart-line :data="chartData" />
  </v-card>
</template>
<script>
import XEUtils from "xe-utils";
import Sortable from "sortablejs";
export default {
  data() {
    return {
      chartData: {
        dimensions: {
          name: "week",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        measures: [
          {
            name: "健身记录",
            data: [15, 40, 26, 60, 80, 66, 100],
          },
        ],
      },
      sortable: null,
      filterFormData: {
        filterFindUrl: "getInHospPatientList4cy",
        operationUrl: "dataq/api/dict/operation", //正式环境不需要
        relationUrl: "dataq/api/dict/relation", //正式环境不需要
        filterFindFormData: {
          deptNo: "14",
        },
      },
      options: {
        headUrl: "dataq/api/header/optionscustomdemo",
        pageUrl: "dataq/api/page/optionscustomdemo",
        filters: true,
        seq: true,
        radio: true,
        checkbox: true,
        headerFormData: {
          ygbh00: 4569,
          zwxm00: "程瑾011",
        },
        pageFormData: {
          limit: 500,
          YPQLDH: "C11520",
          YFBMBH: 2275,
          ygbh00: 4569,
          zwxm00: "程瑾011",
        },
      },
    };
  },
  created() {
    this.columnDrop();
  },
  beforeDestroy() {
    if (this.sortable) {
      this.sortable.destroy();
    }
  },
  methods: {
    handleClick() {
      this.$refs.xTable.showOptionColumnModal({
        tableName: "optionscustomdemo",
      });
    },
    columnDrop() {
      this.$nextTick(() => {
        let xTable = this.$refs.xTable;
        this.sortable = Sortable.create(xTable.$el.querySelector(".body--wrapper>.vcu-table--header .vcu-header--row"), {
          handle: ".vcu-header--column:not(.col--fixed)",
          onEnd: ({ item, newIndex, oldIndex, to }) => {
            let { collectColumn } = xTable.getTableColumn();
            let targetThElem = item;
            let wrapperElem = targetThElem.parentNode;

            // 转换真实索引 newIndex
            const toArr = to.getElementsByClassName("vcu-header--column");
            let newCurrcolid = toArr[newIndex + 1].getAttribute("data-colid");
            let newColumnIndex = XEUtils.findIndexOf(collectColumn, (item) => item.id === newCurrcolid);
            let newColumn = collectColumn[newColumnIndex];
            if (newColumn.fixed) {
              // 错误的移动
              if (newIndex > oldIndex) {
                wrapperElem.insertBefore(targetThElem, wrapperElem.children[oldIndex]);
              } else {
                wrapperElem.insertBefore(wrapperElem.children[oldIndex], targetThElem);
              }
              return this.$error({
                title: "错误",
                content: "固定列不允许拖动！",
              });
            }
            // 转换真实索引 oldIndex
            let oldCurrcolid = item.getAttribute("data-colid");
            let oldColumnIndex = XEUtils.findIndexOf(collectColumn, (item) => item.id === oldCurrcolid);

            // 移动到目标列
            let currRow = collectColumn.splice(oldColumnIndex, 1)[0];
            collectColumn.splice(newColumnIndex, 0, currRow);
            xTable.loadColumn(collectColumn);
          },
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.sortable-column-demo .vcu-header--row .vcu-header--column.sortable-ghost,
.sortable-column-demo .vcu-header--row .vcu-header--column.sortable-chosen {
  background-color: #dfecfb;
}
</style>
